<template>
  <el-form label-position="top" ref="form" label-width="80px" :model="form">
    <el-row :gutter="30">
      <el-col :span="6">
        <el-form-item :label="$t('configLazyLoad.qualityCheck.cycleName')">
          <el-input :maxlength="10" v-model.trim="form.cycleName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-row >
          <el-form-item :label="$t('configLazyLoad.qualityCheck.start&endDate')">
            <el-col :span="11">
              <el-date-picker v-model="form.cycleBegins" id="['k1','k2']" size="mini" type="date" :placeholder="$t('business.chooseDate')">
              </el-date-picker>
            </el-col>
            <el-col class="bet" :span="2">

            </el-col>
            <el-col :span="11">
              <el-date-picker v-model="form.cycleEnds" id="['k3','k4']" size="mini" type="date" :placeholder="$t('business.chooseDate')" >
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="9" class="cycle-time">
        <el-row>
          <el-form-item :label="$t('configLazyLoad.qualityCheck.periodInterval')">
            <el-radio-group @change="changeCycleInterval" v-model="form.cycleInterval">
              <el-radio :label="1">{{$t('configLazyLoad.qualityCheck.oneDay')}}</el-radio>
              <el-radio :label="7"> {{$t('configLazyLoad.qualityCheck.oneWeek')}}</el-radio>
              <el-radio :label="null">{{$t('configLazyLoad.qualityCheck.oneMonth')}}</el-radio>
              <el-radio>
                {{$t('call.custom')}}
              </el-radio>
            </el-radio-group>
            <el-input :style="lang === 'zh_CN' ? 'margin-left: 4px;width: 110px;' : 'margin-left: 4px;width: 160px;'" v-model.trim="cycleInterval" :disabled="!isCycleInterval" size="mini" :placeholder="$t('public.pleaseInput')"><template slot="append">{{$t('public.day2')}}</template></el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="24" class="cycle-time">
        <el-button type="primary" class="primary_btn" @click.stop="saveQualityCheckCycle">{{$t('public.add')}}</el-button>
        <el-button class="primary_btn mar-left" @click.stop="resetForm">{{$t('public.cancel')}}</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  export default {
    name: 'ArtificialPerform',
    data () {
      return {
        cycleInterval: null,
        isCycleInterval: false,
        form: {
          cycleName: '',
          cycleBegins: '',
          cycleEnds: '',
          cycleInterval: 1
        }
      }
    },
    computed: {
      lang() {
        return window.localStorage.lang
      }
    },
    methods: {
      changeCycleInterval (label) {
        if (label === null) label = true
        this.isCycleInterval = !label
      },
      validate (form) {
        if (!form.cycleName) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError1'))
          return false
        }
        if (!form.cycleBegins || !form.cycleEnds) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError2'))
          return false
        } else if (new Date(Date.parse(form.cycleBegins)) >= new Date(Date.parse(form.cycleEnds))) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError3'))
          return false
        } else if (form.cycleInterval === null) {
          let beginDate = new Date(Date.parse(form.cycleBegins))
          if (beginDate.getDate() !== 1) {
            this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError4'))
            return false
          }
        }
        if (this.isCycleInterval && (isNaN(+this.cycleInterval) || this.cycleInterval <= 0)) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError5'))
          return false
        }
        if ((Date.parse(form.cycleEnds) - Date.parse(form.cycleBegins)) / 86400000 < this.cycleInterval) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.cycleError6'))
          return false
        }
        return true
      },
      resetForm () {
        this.form = {
          cycleName: '',
          cycleBegins: '',
          cycleEnds: '',
          cycleInterval: 1
        }
      },
      saveQualityCheckCycle () {
        if (!this.validate(this.form)) return null
        if (this.isCycleInterval) {
          this.form.cycleInterval = this.cycleInterval
        }
        this.$emit('save', this.form)
        this.resetForm()
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
.cycle-time
  .el-input
    width 96px
  .el-button
    float right
    &:last-child
      margin-right 12px
.el-date-editor
  width 100%
.bet
  text-align center
  &:before
    content: ''
    display inline-block
    width 80%
    height 1px
    line-height 90px
    margin-bottom 4px
    background $cf-gray5
</style>
